<template>

  <div>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-col :span="20">
          <el-form-item label="供应商名称" prop="vendorName">
            <el-input v-model="formData.vendorName" placeholder="请输入供应商名称" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="联系人" prop="vendorContact">
            <el-input v-model="formData.vendorContact" placeholder="请输入联系人" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="联系地址" prop="vendorAddress">
            <el-input v-model="formData.vendorAddress" placeholder="请输入联系地址" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="联系电话" prop="vendorPhone">
            <el-input v-model="formData.vendorPhone" placeholder="请输入联系电话" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="供应商说明" prop="vendorIllustrate">
            <el-input v-model="formData.vendorIllustrate" type="textarea" placeholder="请输入供应商说明"
              :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="上传" prop="vendorCert" >
            <el-upload ref="vendorCert" :file-list="vendorCertfileList" :action="vendorCertAction"
              :before-upload="vendorCertBeforeUpload" list-type="picture-card">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>

import {addAdded} from "@/api/vendor/added";
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        vendorName: null,
        vendorContact: null,
        vendorAddress: null,
        vendorPhone: null,
        vendorIllustrate: null,
        vendorCert: null,
      },
      rules: {
        vendorName: [{
          required: true,
          message: '请输入供应商名称',
          trigger: 'blur'
        }],
        vendorContact: [{
          required: true,
          message: '请输入联系人',
          trigger: 'blur'
        }],
        vendorAddress: [{
          required: true,
          message: '请输入联系地址',
          trigger: 'blur'
        }],
        vendorPhone: [{
          required: true,
          message: '请输入联系电话',
          trigger: 'blur'
        }, {
          pattern: /^1[3456789]\d{9}$/,
          message: '格式错误',
          trigger: 'blur'
        }],
        vendorIllustrate: [{
          required: true,
          message: '请输入供应商说明',
          trigger: 'blur'
        }],
      },
      vendorCertAction: 'https://jsonplaceholder.typicode.com/posts/',
      vendorCertfileList: [],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
     submitForm() {
      this.$refs['elForm'].validate(valid => {

        // TODO 提交表单
        if (valid) {
          addAdded(this.formData).then(response => {
              this.$modal.msgSuccess("新增成功");

            });
          }

      })
    },
    // 取消按钮
    cancel() {
      this.reset();
    },
    // 表单重置
    reset() {
      this.formData = {
        vendorName: null,
        vendorContact: null,
        vendorAddress: null,
        vendorPhone: null,
        vendorIllustrate: null,
        vendorCert: null,
      };
      this.resetForm("form");
    },

    vendorCertBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 8
      if (!isRightSize) {
        this.$message.error('文件大小超过 8MB')
      }
      return isRightSize
    },
  }
}
</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}

</style>
